<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 

<!--<script src="js/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>-->

<div class="details" style="border-bottom: none; margin-left: 50px">
	<a href="#"> <img src="<s:property value="#request.product.productImages.get(0).getImageUrl()"/>" width="100px" height="100px" class="pic" width="100" height="150" /></a>
	<div style="float: left; padding-left: 50px; width: 700px">
		<div class="name" style="color: #333; font-size: 25px; padding-bottom: 20px">
			<s:property value="#request.product.name" />
		</div>
		<span style="font-weight: bold; font-size: 16px">Model: </span><span style="font-weight: normal; font-size: 16px; border-right: solid 2px; padding-right: 5px"><s:property value="#request.product.model" /></span>
		<span style="font-weight: bold; font-size: 16px">SKU: </span><span style="font-weight: normal; font-size: 16px; border-right: solid 2px; padding-right: 5px" id="_sku"><s:property value="#request.product.sku" /></span>
		<div style="font-size: 16px; font-weight: bold; padding-top: 10px">Customer rating:</div>
		
		<img src="images/rate_<s:property value="#request.product.rate"/>.jpg"/> <span style="font-size: 15px; color: #F00; padding-left: 10px; font-weight: bold; line-height: 21px"><s:property value="#request.product.rate"/> of 5 stars</span> <br /> <br />
		<p style="font-size: 20px; color: #F00">Price: <s:property value="#request.product.price"/> $</p>
		<span class="button" style="margin-top: 50px;">
			<a href="<s:url action="detailproduct.action">
					<s:param name="sku" value="#request.product.sku" />
					<s:param name="action">AddToCart</s:param>
					</s:url>">Add to Cart</a>
		</span>
		
		
		<span class="button"><a href="<s:url action="user/info">
					<s:param name="action" >AddToWishList</s:param>
					<s:param name="sku" value="sku" />
					</s:url>">Add to Wish list</a>
		</span>
	</div>
</div>
<div id="tabContainer" style="padding-top: 100px">
	<div id="tabs" style="margin-bottom: 8px">
		<ul>
			<li id="tabHeader_1" style="font-size: 20px">Overview</li>
			<li id="tabHeader_2" style="font-size: 20px">Specifications</li>
			<li id="tabHeader_3" style="font-size: 20px">Ratings & Reviews</li>
			<li id="tabHeader_4" style="font-size: 20px">Accessories</li>
		</ul>
	</div>
	<div id="tabscontent">
		<div class="tabpage" id="tabpage_1">
			<h1>.</h1>
			<div style="display: block !important; width: 500px; float: left"> <br /> 
				<img id="show-pic" src="<s:property value="#request.product.productImages.get(0).getImageUrl()"/>" width="400" height="400" style="margin: -10px 20px 20px 20px;" />
				<ul style="padding-left: 10px">
					<s:iterator value="#request.product.productImages">
						<li><a href="<s:property value="getImageUrl()"/>" class="preview" title=""><img style="border: solid 1px #000" src="<s:property value="getImageUrl()"/>" width="70" height="70" alt="gallery thumbnail"></a></li>	
					</s:iterator>
				</ul>
			</div>
			<div style="float: left; display: block !important; width: 400px">
				<div
					style="float: left; display: block !important; font-size: 20px; font-weight: bold;">Description:
				</div>
				<p style="height: 20px" />
				<hr />
				<p style="font-size: 15px; padding-bottom: 20px"><s:property value="#request.product.description"/></p>
				<div
					style="float: left; display: block !important; font-size: 20px; font-weight: bold;">What's
					Included</div>
				<p style="padding-bottom: 20px" />
				<hr />
				<div style="display: block !important;">
					<ul>
						<s:iterator value="#request.product.includes" >
							<li style="display: list-item; list-style: inherit; line-height: 20px; margin-left: 15px"><s:property /></li>
						</s:iterator>
					</ul>
				</div>
			</div>
			<div style="display: block !important; font-size: 20px; font-weight: bold; width: 960px; margin-top: 600px; margin-left: 10px">Product Features</div> <hr />
			
			<s:iterator value="#request.product.features" >
				<p style="display: list-item; font-size: 15px; font-weight: bold; color: #333333; margin-left: 80px"><s:property /></p>
			</s:iterator>
			<div></div>
		</div>
		<div class="tabpage" id="tabpage_2">
			<h1 style="margin-top: 20px;">Specifications:</h1>
			<table style="margin: auto; font-size: 15px; width: 940px">
			
				<tr>
					<th width="25%">Specs:</th>
					<th width="25%">Details:</th>
					<th width="40%px">Description:</th>
				</tr>
				
				<tr>
					<td style="font-weight: bold;">Warranty Terms - Parts</td>
					<td><s:property value="#request.product.specification.getWarrantyTermsParts()"/></td>
					<td></td>
				</tr>
				
				<tr>
					<td style="font-weight: bold;">Warranty Terms - Labor</td>
					<td><s:property value="#request.product.specification.getWarrantyTermsLabor()"/></td>
					<td></td>
				</tr>
				
				<tr>
					<td style="font-weight: bold;">Height</td>
					<td><s:property value="#request.product.specification.getHeight()"/></td>
					<td></td>
				</tr>
				
				<tr>
					<td style="font-weight: bold;">Width</td>
					<td><s:property value="#request.product.specification.getWidth()"/></td>
					<td></td>
				</tr>
				
				<tr>
					<td style="font-weight: bold;">Depth</td>
					<td><s:property value="#request.product.specification.getDepth()"/></td>
					<td></td>
				</tr>
				
				<tr>
					<td style="font-weight: bold;">Weight</td>
					<td><s:property value="#request.product.specification.getWeight()"/></td>
					<td></td>
				</tr>
				
				<tr>
					<td style="font-weight: bold;">LTE</td>
					<td><s:property value="#request.product.specification.getLte()"/></td>
					<td></td>
				</tr>
				
				<tr>
					<td style="font-weight: bold;">Phone Style</td>
					<td><s:property value="#request.product.specification.getPhoneStyle()"/></td>
					<td></td>
				</tr>
				
				<tr>
					<td style="font-weight: bold;">Band and Mode</td>
					<td><s:property value="#request.product.specification.getBandAndMode()"/></td>
					<td>Number/type of bands and modes the phone can use, which affects coverage and capabilities.</td>
				</tr>
				
				<tr>
					<td style="font-weight: bold;">Technology Details</td>
					<td><s:property value="#request.product.specification.getTechnologyDetails()"/></td>
					<td>Wireless network technology the phone uses. Common technologies include GSM, CDMA and TDMA (including iDEN).</td>
				</tr>
				
				<tr>
				
					<td style="font-weight: bold;">Talk Time</td>
					<td><s:property value="#request.product.specification.getTalkTime()"/></td>
					<td>Amount of time you can spend talking on the phone before the battery is depleted.</td>
				</tr>
				
				<tr>
					<td style="font-weight: bold;">Standby Time</td>
					<td><s:property value="#request.product.specification.getStandbyTime()"/></td>
					<td>Amount of time the phone can be left on (waiting for a call) before the battery is depleted.</td>
				</tr>
				
				<tr>
					<td style="font-weight: bold;">Battery Type</td>
					<td><s:property value="#request.product.specification.getBatteryType()"/></td>
					<td></td>
				</tr>
				
				<tr>
					<td style="font-weight: bold;">Voice Activated</td>
					<s:if test="%{#request.product.specification.getVoiceActivated() == true}">
						<td>Yes</td>
					</s:if>
					<s:elseif test="%{#request.product.specification.getVoiceActivated() == false}">
						<td>No</td>
					</s:elseif>
					<s:else>
						<td></td>
					</s:else>
					
					<td>Lets you dial a preset phone number by saying a word (e.g., "home").</td>
				</tr>
				
				<tr>
					<td style="font-weight: bold;">Internet/Email Capable</td>
					
					<s:if test="%{#request.product.specification.getInternetEmailCapable() == true}">
						<td>Yes</td>
					</s:if>
					<s:elseif test="%{#request.product.specification.getInternetEmailCapable() == false}">
						<td>No</td>
					</s:elseif>
					<s:else>
						<td></td>
					</s:else>
					
					<td>These devices offer wireless Internet, which can be used to access email at specific sites. Some devices also offer a full e-mail client that can connect directly to a standard POP or IMAP e-mail server over a wireless Internet connection.</td>
				</tr>
				
				<tr>
					<td style="font-weight: bold;">Touch Screen</td>
					
					<s:if test="%{#request.product.specification.getTouchScreen() == true}">
						<td>Yes</td>
					</s:if>
					<s:elseif test="%{#request.product.specification.getTouchScreen() == false}">
						<td>No</td>
					</s:elseif>
					<s:else>
						<td></td>
					</s:else>
					
					<td></td>
				</tr>
				
				<tr>
					<td style="font-weight: bold;">Device Manufacturer</td>
					<td><s:property value="#request.product.deviceBrand.getName()"/></td>
					<td></td>
				</tr>
				
				<tr>
					<td style="font-weight: bold;">Color Category</td>
					<td><s:property value="#request.product.specification.getColorCategory()"/></td>
					<td></td>
				</tr>
				
				<tr>
					<td style="font-weight: bold;">Wireless Capability</td>
					<td><s:property value="#request.product.specification.getWirelessCapability()"/></td>
					<td>Ability for laptops and netbooks with embedded mobile broadband to connect to a cellular network for wireless Internet access on the go. Service contract required with a carrier.</td>
				</tr>
				
				<tr>
					<td style="font-weight: bold;">Operating System</td>
					<td><s:property value="#request.product.specification.getOperatingSystem()"/></td>
					<td>The master software that controls hardware functions and provides a platform on top of which any software applications will run. Commonly used systems include Microsoft Windows and Mac OS X for computers and Palm OS and Microsoft Windows Mobile for PDAs.</td>
				</tr>
				
				<tr>
					<td style="font-weight: bold;">Data Plan Required</td>
					
					<s:if test="%{#request.product.specification.getDataPlanRequired() == true}">
						<td>Yes</td>
					</s:if>
					<s:elseif test="%{#request.product.specification.getDataPlanRequired() == false}">
						<td>No</td>
					</s:elseif>
					<s:else>
						<td></td>
					</s:else>
					
					<td></td>
				</tr>
				
				<tr>
					<td style="font-weight: bold;">Mobile Operating System</td>
					<td><s:property value="#request.product.operatingSystem.getName()"/></td>
					<td></td>
				</tr>
				
				<tr>
					<td style="font-weight: bold;">Built-In GPS</td>
					
					<s:if test="%{#request.product.specification.getBuiltinGps() == true}">
						<td>Yes</td>
					</s:if>
					<s:elseif test="%{#request.product.specification.getBuiltinGps() == false}">
						<td>No</td>
					</s:elseif>
					<s:else>
						<td></td>
					</s:else>
					
					<td></td>
				</tr>
				
				<tr>
					<td style="font-weight: bold;">Screen Size (Measured Diagonally)</td>
					<td><s:property value="#request.product.specification.getScreenSize()"/></td>
					<td>Size of the screen, in inches, measured diagonally from corner to corner.</td>
				</tr>
				
				<tr>
					<td style="font-weight: bold;">Bluetooth Version</td>
					<td><s:property value="#request.product.specification.getBluetoothVersion()"/></td>
					<td></td>
				</tr>
				
				<tr>
					<td style="font-weight: bold;">Keyboard Type</td>
					<td><s:property value="#request.product.specification.getKeyboardType()"/></td>
					<td></td>
				</tr>
				
				<tr>
					<td style="font-weight: bold;">Front Facing Camera MP Rating</td>
					<td><s:property value="#request.product.specification.getFrontCamera()"/></td>
					<td></td>
				</tr>
				
				<tr>
					<td style="font-weight: bold;">Rear Facing Camera MP Rating</td>
					<td><s:property value="#request.product.specification.getRearCamera()"/></td>
					<td></td>
				</tr>
				
				<tr>
					<td style="font-weight: bold;">UPC</td>
					<td><s:property value="#request.product.specification.getUpc()"/></td>
					<td></td>
				</tr>
			</table>
		</div>
		<div class="tabpage" id="tabpage_3">
			<h1 style="margin-top: 20px;">Best Buy Customer Reviews</h1>
			<h2>Rate:</h2>
			<div id="rating_cont" style="float: left">
				<div id="rating_btns">
					<ul>
						<li>0.5</li>
						<li>1.0</li>
						<li>1.5</li>
						<li>2.0</li>
						<li>2.5</li>
						<li>3.0</li>
						<li>3.5</li>
						<li>4.0</li>
						<li>4.5</li>
						<li>5.0</li>
					</ul>
				</div>
				<div id="rating_on">&nbsp;</div>
				<div id="rated">
					<div id="rating" style="height: 17px; line-height: 17px;">not
						rated</div>
					<div>- &nbsp;</div>
					<div id="small_stars">&nbsp;</div>
					<div id="rate_edit">edit</div>
				</div>
			</div>
			<span
				style="float: left; font-size: 20px; color: #F00; font-weight: bold; padding-left: 20px"
				id="show_rate">0 of 5 stars</span>
			<script>
		  	function showRate(val){
				document.getElementById('show_rate').innerHTML = val + " of 5 stars";
								
				}
		  	
		  	function rating(){
		  		alert("sdfsd");
		  		var url = window.location.pathname;
		  		alert(url);
		  		var star = document.getElementById('show_rate').innerHTML;
		  		var sku = document.getElementById('_sku').innerHTML;
		  		var param = "/detailproduct.action?sku=" + sku + "&action=rating&star=" star.substring(0, star.indexOf(" "));
		  		url = url.substring(0, url.lastIndexOf("/")) + param;
		  		alert(url);
				
		  	}
          </script>
			<input type="hidden" id="rating_output" name="rating_output" value="not rated" />
			<!-- comment -->
			<h2 style="width: 200px; margin: 45px 0 15px 0">Reviews:</h2>
			<span class="button"><a href="#comment-text">Write comment</a></span>
			<br />
			<br /> <br />
			
			<s:if test="%{#request.product.rateReviews != null && #request.product.rateReviews.size != 0}">
				<s:iterator value="#request.product.rateReviews" >
					<span style="font-size: 20px; font-weight: bold; color: #C00; padding-left: 50px;"><s:property value="getNickname()"/>: </span><br /> 
					<img src="images/rate_<s:property value="getOverallRating()"/>.jpg" style="padding-left: 50px" />
					<span style="font-size: 18px; color: #039; padding-left: 20px; font-weight: bold"><s:property value="getReviewContent()"/></span> <br /> <br />
				</s:iterator>
			</s:if>
			<s:else>
				<span>No rate - review for this product</span>
			</s:else>
			
			<h2 style="margin-top: 20px">Comment:</h2>
			<br />
			<textarea rows="5" cols="70" name="comment" id="comment-text"
				form="usrform"
				style="text-align: left; border: solid 2px; border-radius: 10px; font-size: 20px">Enter your comment here...</textarea>
			<h2 style="margin-top: 20px">Name:</h2>
			<input type="text" min="150"
				style="line-height: 25px; border-radius: 5px; font-size: 18px" /> 
				
				<span class="button" style="margin-left: 100px; font-size: 20px; font-weight: bold" onclick="rating()">
				<a href="#">Submit</a>
				</span>
				
		</div>
		<div class="tabpage" id="tabpage_4">
			<h1 style="margin-top: 20px;">Additional Accessories</h1>
			<hr style="margin-bottom: 20px" />
			
			<s:if test="%{#request.product.accessories != null && #request.product.accessories.size != 0}">
				<s:iterator value="#request.product.accessories">
					<!-- 1 san pham cung loai -->
					<div style="display: block !important; padding-left: 50px">
						<div style="display: block !important; min-height: 150px">
							<span style="float: left; margin: 0 20px 20px 0"><img src="<s:property value="getUrlImage()"/>" width="100" height="100" /></span> <span style="font-size: 20px; color: #009;"><s:property value="getName()"/></span><br />
							<span style="font-weight: bold; font-size: 16px">Model: </span>
							<span style="font-weight: normal; font-size: 16px; border-right: solid 2px; padding-right: 5px"><s:property value="getModel()"/></span>
							<span style="font-weight: bold; font-size: 16px">SKU: </span><span style="font-weight: normal; font-size: 16px; border-right: solid 2px; padding-right: 5px"><s:property value="getSku()"/></span><br />
							<span style="font-size: 12px; font-weight: bold">Customer Reviews: </span><img src="images/rate_<s:property value="getRate()"/>.jpg" />
							<span style="font-size: 12px; font-weight: bold"><s:property value="getRate()"/> of 5</span><br />
							<span style="font-size: 12px; font-weight: bold">Price: </span>
							<span style="font-size: 12px; font-weight: bold; color: #f00"><s:property value="getPrice()"/> $</span><br /> <br /> 
							<span class="button" style="margin-top: 80px;"><a href="#">Add to Cart</a></span>
						</div>
						<!-- ket thuc 1 san pham-->
					</div>
				</s:iterator>
			</s:if>
			<s:else>
				<div style="display: block !important; padding-left:50px; font-size:15px;">No product in additional accessories</div>
			</s:else>
			
			
		</div>
	</div>
</div>